<template>
	<Row style="height:100vh"></Row>
	<div class="jbox-wrap" style="overflow-x:auto;">
		<div class="jbox" ref="c-box" style="width:200vw;">
			<RadioGroup v-model="box.a">
				<Radio :label="1"></Radio>
				<Radio :label="2"></Radio>
			</RadioGroup>
			<Input v-model="box.c" placeholder=""></Input>
			<Input v-model="mybox.sub.a" placeholder=""></Input>
			<div>
				{{ box.a }}
			</div>
		</div>
	</div>
	<div class="relatebox" v-if="box.a == 1">{{ box.b }}</div>
	<Row>
		<Button type="default" @click="add">操作</Button>
	</Row>
	<Row style="height:100vh">

	</Row>
	<Row>
		<Button type="defualt" @click="scroll">操作</Button>
		<Button type="default" @click="download">下载</Button>
	</Row>
	<Upload action="//jsonplaceholder.typicode.com/posts/" :before-upload="onUpload">
		<Button type="default" icon="ios-cloud-upload-outline">上传文件</Button>
	</Upload>
</template>
<script>
import Schema from 'async-validator';
class MyBox {
	constructor() {
		this.a = 1;
		this.sub = new MyBoxSub()
	}
	init() {
		console.log(this.sub);
		this.sub.init();
	}
}
class MyBoxSub {
	constructor() {
		this.a = 1;
		// setInterval(() => {
		// 	console.log(`this`, this);
		// 	this.a++
		// }, 1e3);
	}
	init() {
		setInterval(() => {
			// console.log(`this`, this);
			this.a++
		}, 1e3);
	}
}
const mb = new MyBox();
export default {
	data() {
		console.log(1);
		return {
			box: {
				a: 1,
				b: 2,
				c: ''
			},
			mybox: mb
		}
	},
	created() {
		console.log(2);
	},
	methods: {
		onUpload(e) {
			this.downLoadBlob(e, {
				headers: {
					'content-type': e.type
				}
			});
			return false;
		},
		download() {
			const link = document.createElement('a')
			// link.href = 'https://pictest.hangjiayun.com/2021/0225/16142352300483445246.jpg';
			link.href = 'https://hangjiayun.oss-cn-shanghai.aliyuncs.com/component.min.js';
			link.download = '1.js';
			link.target = '_blank';
			// document.body.appendChild(link);
			// link.innerHTML = '测试'
			link.click();
		},
		downLoadBlob(data, headers) {
			// 根据接口返回的文件流数据 data, 创建 blob 对象
			const blob = new Blob([data], { type: headers['content-type'] })
			// 生成指向 blob 对象的临时 URL
			const downUrl = window.URL.createObjectURL(blob)
			// 创建 a 链接
			const dom_a = document.createElement('a')
			// a 链接的 href 属性为 blob 对象的临时 URL
			dom_a.href = downUrl
			// a 链接的 download 属性为进行URL解码的 fileName
			dom_a.download = decodeURIComponent(data.name)
			// a 链接的 display 样式为 none，避免在页面上显示
			dom_a.style.display = 'none'
			// 将 a 链接添加到 body 标签中
			document.body.appendChild(dom_a)
			// 点击 a 链接，触发文件的下载
			dom_a.click()
			// 将 a 链接从父标签（此处为 body ）中移除
			dom_a.parentNode.removeChild(dom_a)
			// 清除指向 blob 对象的临时 URL
			window.URL.revokeObjectURL(downUrl)

		},
		add() {
			let fv = new Schema({
				c: [{
					required: true,
					message: '测试'
				}]
			})
			fv.validate(this.box, (error) => {
				if (error) {
					this.$Message.info(error[0].message);
				} else {
					this.$Message.success(`成功`);
				}
			});
		},
		scroll() {
			const elem = this.$refs['c-box'];
			console.log(elem);
			elem.scrollIntoView({
				behavior: 'smooth',
				block: 'end',
				inline: 'start'
			});
		}
	},
	mounted() {
		this.mybox.init();
		let str = '12223333';
		str = str.replace(/2(3)+/, async (match, p1, offset, string, groups) => {
			console.log(match, p1, groups);
			return ''
		})
		let results = /(ab)|(cd)/.exec("cd")
		console.log(results);

		let reg, ms;
		//12345.555
		str = "12445.556";
		reg = /(?:\d+)\.(\d+)/;
		ms = str.match(reg)[1]
		console.log(ms);

		str = '$111.11'
		str = '$111.1'
		reg = /\$(\d+(?:\.\d+)?)/
		ms = str.match(reg);
		console.log(ms);

		str = '111.11'
		reg = /(?=111)111\.11/;
		ms = str.match(reg)
		console.log('?=', ms);
		str = '111111111111元';
		reg = /(?=\B(\d{3})+$)/g
		reg = /(?=\B(\d{3})+(?!\d))/g
		str = str.replace(reg, ',')
		console.log(str);

		str = '1234523'
		reg = /(?<=1)23/
		ms = str.match(reg);
		console.log('<=1', ms);
		str = `title="abc"`
		reg = /(?<=(['"]))[^']+(?=\1)/
		ms = str.match(reg)
		console.log(ms);
		str = `xxx b23c@qq.com xxx`
		reg = /\w+(?=@)/
		ms = str.match(reg)
		console.log(ms);
		str = 'abc'
		reg = /(?:)/g
		ms = str.split(reg)
		console.log(ms);
	},

}
</script>
<style lang="scss" scoped>
.box {
	width: 100px;
	height: 100px;
	border: 1px solid #000;
}
.relatebox {
	width: 100px;
	height: 100px;
	border: 1px solid #000;
}
.jbox {
	margin-left: 100px;
}
</style>